import React, {useRef} from "react";
import { AddFlex } from '../styled';
import {Input, Select, Form, InputNumber} from "antd";
import { ITempUserInfo } from '../interFace';

const {Option} = Select;

interface IProps {
    userInfo: ITempUserInfo,
    setUserInfo(allValue: ITempUserInfo): void,
    form: any
}

const ProFrom = (props: IProps) => {

    const {userInfo} = props;

    const {setUserInfo, form} = props;

    const onValuesChange = (singleValue: any, allValue: ITempUserInfo) => {
        setUserInfo(allValue);
    };
    // 学习useRef
    const formRef = useRef<any>();

    const test = () => {
        // 能拿到ref
        console.log('formRef----formRef',formRef);
    };

    return (
        <Form
            name='validateForm'
            initialValues={userInfo}
            onValuesChange={onValuesChange}
            ref={formRef}
            form={form}
        >
            {
                false && <button onClick={test}>单纯测试useRef</button>
            }
            <AddFlex>
                <div className='addItem'>
                    <div className='title'>Number</div>
                    <Form.Item
                        name='number'
                        rules={[
                            {
                                required: true,
                                message: '您好，编号不可为空',
                            },
                        ]}
                    >
                        <InputNumber placeholder="input Number" size="large"/>
                    </Form.Item>
                </div>
                <div className='addItem'>
                    <div className='title'>Name</div>
                    <Form.Item
                        name='name'
                        rules={[
                            {
                                required: true,
                                message: '您好，姓名不可为空',
                            },
                        ]}
                    >
                        <Input placeholder="input Name" size="large"/>
                    </Form.Item>

                </div>
            </AddFlex>
            <AddFlex>
                <div className='addItem'>
                    <div className='title'>Participant Password</div>
                    <Form.Item
                        name='PartPassword'
                        rules={[
                            {
                                required: true,
                                message: '您好，密码不能为空',
                            },
                        ]}
                    >
                        <Input.Password
                            placeholder="input password"
                            size="large"
                        />
                    </Form.Item>
                </div>
                <div className='addItem'>
                    <div className='title'>Moderator Password</div>
                    <Form.Item
                        name='ModePassword'
                        rules={[
                            {
                                required: true,
                                message: '您好，密码不能为空',
                            },
                        ]}
                    >
                        <Input.Password
                            placeholder="input password"
                            size="large"
                        />
                    </Form.Item>
                </div>
            </AddFlex>
            <AddFlex>
                <div className='addItem'>
                    <div className='title'>Sound Prompt</div>
                    <Form.Item name='defaultValue'>
                        <Select style={{width: '100%'}}>
                            <Option value="Default">Default</Option>
                            <Option value="Off">Off</Option>
                            <Option value="Open">Open</Option>
                        </Select>
                    </Form.Item>
                </div>
            </AddFlex>
        </Form>
    )

}

export default React.memo(ProFrom)